<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
    <script src="https://cdn.ckeditor.com/ckeditor5/26.0.0/classic/ckeditor.js"></script>
    <script src="../../dependence/Squire/squire-raw.js"></script>
    <title>富文本编辑器</title>
    <style>
      .box {
        margin: 0 auto;
        display: flex;
        flex-direction: row;
      }

      .editor {
        margin: 0 auto;
        width: 45%;
        height: 40vh;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div class="editor">
        <p>wangEditor</p>
        <p>
          <b>文档地址</b>
          <a href="https://doc.wangeditor.com">https://doc.wangeditor.com</a>
        </p>
        <div id="wangEditor"></div>
      </div>
      <div class="editor">
        <p>Squire</p>
        <p>
          <b></b>
          <a
            href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html"
            >https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html</a
          >
        </p>
        <div id="ckeditor">
          <div id="_ckeditor"></div>
        </div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    // wangEditor init
    const E = window.wangEditor;
    const editor1 = new E("#wangEditor"); // 或者 const editor = new E( document.getElementById('div1') )
    editor1.create();

    // Squire init
    ClassicEditor.create(document.querySelector("#_ckeditor")).catch(
      (error) => {
        console.error(error);
      }
    );
  </script>
</html>
